<template>
    <div>
        <el-cascader-panel 
            :options="categoryData" 
            :props="{ label:'name', value: 'id' }" 
            v-model="categoryIds"
            @change="cascaderChange"
            ref="categoryCascader"></el-cascader-panel>
        <div class="cascaderList" v-if="categoryNames.length !== 0">
            <span style="color: #606266;">您选择的商品分类：</span>
            <span v-for="(categoryName, index) in categoryNames" style="color: #409EFF;">
                {{ categoryName }}
                <span v-if="categoryNames.length - 1 !== index" style="margin: 0 10px;">▶</span>
            </span>
        </div>
        <el-button type="info" disabled>已经是第一步啦</el-button>
        <el-button type="primary" :disabled="categoryIds.length === 0" @click="next()">下一步，填写商品信息</el-button>
    </div>
</template>

<script>
    import { get } from '@/plugins/axios.js'
    import { url } from '@/views/pms/category/operate/api.js'
    export default {
        name: 'CategoryForm',
        data() {
            return {
                categoryData: [],
                categoryIds: [],
                categoryNames: []
            }
        },
        created() {
            this.getCategoryData()
        },
        methods: {
            getCategoryData() {
                get(url.list, "", content => {
                    this.categoryData = content
                })
            },
            cascaderChange() {
                this.categoryNames = this.$refs['categoryCascader'].getCheckedNodes()[0].pathLabels
            },
            next () {
                this.$emit('update:categoryIds', this.categoryIds)
                this.$emit('update:categoryNames', this.categoryNames)
                this.$emit('update:step', 1)
            }
        }
    }
</script>

<style scoped lang="less">
    .el-button {
        position: fixed;
        bottom: 3%;
        right: 3%;
        z-index: 100;
        width: 200px;
    }
    .el-button:first-of-type {
        position: fixed;
        bottom: 3%;
        left: calc(3% + 200px);
        z-index: 100;
    }
    /deep/ .el-scrollbar__bar.is-horizontal {
        display: none !important;
    }
    .el-cascader-panel {
        margin-top: 20px;
    }
    .cascaderList {
        font-size: 14px;
        margin-top: 20px;
        margin-left: 10px;
    }
</style>